import React from 'react';
import { Row, Col, Form, Input, Icon } from 'antd';
import Button from '../ButtonPc';
import RangePicker from '../RangePicker';
import styles from '../index.less';

const ProjectItem = ({ form, index, i, remove, ...rest }) => {
    const { getFieldDecorator } = form;

    return (
        <div className={styles.formWrapNew}>
            <div className={styles.itemHead}>
                <div>项目经历{i + 1}</div>
                <Icon
                    type="close-circle"
                    theme="filled"
                    style={{ fontSize: 16, color: '#49536C' }}
                    onClick={() => remove(index)}
                />
            </div>
            <Row gutter={120} {...rest}>
                <Col lg={12} md={24}>
                    <Form.Item label="起止时间">
                        {getFieldDecorator(`projectStartTime[${index}]`, {
                            rules: [{ required: true, message: '请选择起止时间' }]
                        })(<RangePicker format="YYYY/MM/DD" style={{ width: '100%' }} placeholder="请选择起止时间" />)}
                    </Form.Item>
                </Col>
                <Col lg={12} md={24}>
                    <Form.Item label="项目名称">
                        {getFieldDecorator(`projectProjectName[${index}]`, {
                            initialValue: '',
                            rules: [
                                {
                                    required: true,
                                    message: '请输入项目名称',
                                    whitespace: true
                                }
                            ]
                        })(<Input placeholder="请输入项目名称" maxLength={100} allowClear />)}
                    </Form.Item>
                </Col>
                <Col span={24}>
                    <Form.Item label="项目描述">
                        {getFieldDecorator(`projectProjectDesc[${index}]`, {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入项目描述',
                                    whitespace: true
                                }
                            ]
                        })(
                            <Input.TextArea
                                rows={7}
                                maxLength={800}
                                placeholder="请输入项目描述"
                                style={{ marginTop: 4 }}
                            />
                        )}
                    </Form.Item>
                </Col>
                <Col span={24}>
                    <Form.Item label="项目中职责">
                        {getFieldDecorator(`projectProjectWorkDesc[${index}]`, {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入项目中职责',
                                    whitespace: true
                                }
                            ]
                        })(
                            <Input.TextArea
                                rows={7}
                                maxLength={800}
                                placeholder="请输入项目中职责"
                                style={{ marginTop: 4 }}
                            />
                        )}
                    </Form.Item>
                </Col>
            </Row>
        </div>
    );
};

const Project = ({ form }) => {
    const { getFieldDecorator } = form;

    const add = () => {
        const projectKeys = form.getFieldValue('projectKeys');
        const nowId = projectKeys[projectKeys.length - 1] + 1 || 0;
        const nextKeys = projectKeys.concat(nowId);
        form.setFieldsValue({
            projectKeys: nextKeys
        });
    };

    const remove = React.useCallback(k => {
        const projectKeys = form.getFieldValue('projectKeys');
        form.setFieldsValue({
            projectKeys: projectKeys.filter(key => key !== k)
        });
    }, []);

    getFieldDecorator('projectKeys', { initialValue: [] });
    const projectKeys = form.getFieldValue('projectKeys');

    return (
        <>
            {projectKeys.map((key, i) => (
                <ProjectItem form={form} key={key} index={key} i={i} remove={remove} />
            ))}

            <div style={{ margin: '0 0 24px 0' }}>
                <Button block className={styles.addBtn} onClick={add} disabled={projectKeys.length >= 10}>
                    <Icon type="plus" /> 添加项目经历
                </Button>
            </div>
        </>
    );
};

export default Project;
